<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-header">
				<view class="avatar-section">
					<image class="user-avatar" :src="userInfo.avatar" mode="aspectFill" @click="changeAvatar"></image>
					<view class="verified-badge" v-if="userInfo.verified">✓</view>
					<view class="camera-icon" @click="changeAvatar">📷</view>
				</view>
				<view class="user-info">
					<text class="user-name">{{userInfo.name}}</text>
					<text class="user-role">{{userInfo.role}}</text>
					<view class="user-stats">
						<text class="stat-item">⭐ {{userInfo.rating}}</text>
						<text class="stat-item">📝 {{userInfo.orderCount}}单</text>
						<text class="stat-item">🕒 {{userInfo.joinTime}}</text>
					</view>
				</view>
				<view class="edit-btn" @click="editProfile">
					<text class="edit-icon">✏️</text>
				</view>
			</view>
			
			<!-- 认证状态 -->
			<view class="auth-status">
				<view class="auth-item" :class="{verified: userInfo.idVerified}">
					<text class="auth-icon">🆔</text>
					<text class="auth-text">身份认证</text>
					<text class="auth-status-text">{{userInfo.idVerified ? '已认证' : '未认证'}}</text>
				</view>
				<view class="auth-item" :class="{verified: userInfo.phoneVerified}">
					<text class="auth-icon">📱</text>
					<text class="auth-text">手机认证</text>
					<text class="auth-status-text">{{userInfo.phoneVerified ? '已认证' : '未认证'}}</text>
				</view>
			</view>
		</view>

		<!-- 收入统计 -->
		<view class="income-card-container">
			<view class="income-card">
				<view class="card-header">
					<text class="card-title">💰 收入统计</text>
					<text class="view-detail" @click="viewIncomeDetail">查看详情 ></text>
				</view>
				<view class="income-stats">
					<view class="income-item">
						<text class="income-value">¥{{incomeData.totalIncome}}</text>
						<text class="income-label">总收入</text>
					</view>
					<view class="income-item">
						<text class="income-value">¥{{incomeData.monthIncome}}</text>
						<text class="income-label">本月收入</text>
					</view>
					<view class="income-item">
						<text class="income-value">¥{{incomeData.pendingIncome}}</text>
						<text class="income-label">待结算</text>
					</view>
				</view>
				<view class="withdraw-section">
					<button class="withdraw-btn" @click="withdraw">提现</button>
				</view>
			</view>

			<!-- 订单统计 -->
			<view class="order-stats-card">
				<view class="card-header">
					<text class="card-title">📊 订单统计</text>
				</view>
				<view class="stats-grid">
					<view class="stat-item" @click="viewOrders('pending')">
						<text class="stat-number">{{orderStats.pending}}</text>
						<text class="stat-label">待接单</text>
					</view>
					<view class="stat-item" @click="viewOrders('accepted')">
						<text class="stat-number">{{orderStats.accepted}}</text>
						<text class="stat-label">已接单</text>
					</view>
					<view class="stat-item" @click="viewOrders('in_progress')">
						<text class="stat-number">{{orderStats.inProgress}}</text>
						<text class="stat-label">服务中</text>
					</view>
					<view class="stat-item" @click="viewOrders('completed')">
						<text class="stat-number">{{orderStats.completed}}</text>
						<text class="stat-label">已完成</text>
					</view>
				</view>
			</view>

			<!-- 功能菜单 -->
			<view class="menu-card">
				<view class="menu-section">
					<text class="section-title">订单管理</text>
					<view class="menu-item" @click="goToMyOrders">
						<view class="menu-icon">📋</view>
						<text class="menu-text">我的订单</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToMyPublished">
						<view class="menu-icon">📝</view>
						<text class="menu-text">我发布的</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToFavorites">
						<view class="menu-icon">❤️</view>
						<text class="menu-text">我的收藏</text>
						<text class="menu-arrow">></text>
					</view>
				</view>

				<view class="menu-section">
					<text class="section-title">服务管理</text>
					<view class="menu-item" @click="goToServiceSettings">
						<view class="menu-icon">⚙️</view>
						<text class="menu-text">服务设置</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToAvailability">
						<view class="menu-icon">🕒</view>
						<text class="menu-text">可服务时间</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToServiceArea">
						<view class="menu-icon">📍</view>
						<text class="menu-text">服务范围</text>
						<text class="menu-arrow">></text>
					</view>
				</view>

				<view class="menu-section">
					<text class="section-title">账户管理</text>
					<view class="menu-item" @click="goToPets">
						<view class="menu-icon">🐾</view>
						<text class="menu-text">宠物档案</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToSecurity">
						<view class="menu-icon">🔒</view>
						<text class="menu-text">账户安全</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToPaymentSettings">
						<view class="menu-icon">💳</view>
						<text class="menu-text">支付设置</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToPrivacy">
						<view class="menu-icon">🛡️</view>
						<text class="menu-text">隐私设置</text>
						<text class="menu-arrow">></text>
					</view>
				</view>

				<view class="menu-section">
					<text class="section-title">帮助支持</text>
					<view class="menu-item" @click="goToHelp">
						<view class="menu-icon">❓</view>
						<text class="menu-text">帮助中心</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="contactSupport">
						<view class="menu-icon">📞</view>
						<text class="menu-text">联系客服</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToFeedback">
						<view class="menu-icon">💬</view>
						<text class="menu-text">意见反馈</text>
						<text class="menu-arrow">></text>
					</view>
					<view class="menu-item" @click="goToAbout">
						<view class="menu-icon">ℹ️</view>
						<text class="menu-text">关于我们</text>
						<text class="menu-arrow">></text>
					</view>
				</view>
			</view>

			<!-- 退出登录 -->
			<view class="logout-section">
				<button class="logout-btn" @click="logout">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				name: '张小宠',
				role: '宠物护理师',
				avatar: '/static/avatar1.png',
				verified: true,
				rating: 4.9,
				orderCount: 156,
				joinTime: '2023年6月',
				idVerified: true,
				phoneVerified: true
			},
			incomeData: {
				totalIncome: 12580,
				monthIncome: 2350,
				pendingIncome: 450
			},
			orderStats: {
				pending: 3,
				accepted: 2,
				inProgress: 1,
				completed: 150
			}
		}
	},
	onLoad() {
		this.loadUserData()
	},
	methods: {
		// 加载用户数据
		loadUserData() {
			// 模拟API调用
			console.log('加载用户数据')
		},
		
		// 更换头像
		changeAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					// 这里应该上传到服务器
					this.userInfo.avatar = tempFilePath
					uni.showToast({title: '头像更新成功', icon: 'success'})
				}
			})
		},
		
		// 编辑个人资料
		editProfile() {
			uni.navigateTo({
				url: '/pages/edit-profile/edit-profile'
			})
		},
		
		// 查看收入详情
		viewIncomeDetail() {
			uni.navigateTo({
				url: '/pages/income-detail/income-detail'
			})
		},
		
		// 提现
		withdraw() {
			if (this.incomeData.pendingIncome <= 0) {
				uni.showToast({title: '暂无可提现金额', icon: 'none'})
				return
			}
			uni.navigateTo({
				url: '/pages/withdraw/withdraw'
			})
		},
		
		// 查看订单
		viewOrders(status) {
			uni.navigateTo({
				url: `/pages/my-orders/my-orders?status=${status}`
			})
		},
		
		// 我的订单
		goToMyOrders() {
			uni.navigateTo({
				url: '/pages/my-orders/my-orders'
			})
		},
		
		// 我发布的
		goToMyPublished() {
			uni.navigateTo({
				url: '/pages/my-published/my-published'
			})
		},
		
		// 我的收藏
		goToFavorites() {
			uni.navigateTo({
				url: '/pages/favorites/favorites'
			})
		},
		
		// 服务设置
		goToServiceSettings() {
			uni.navigateTo({
				url: '/pages/service-settings/service-settings'
			})
		},
		
		// 可服务时间
		goToAvailability() {
			uni.navigateTo({
				url: '/pages/availability/availability'
			})
		},
		
		// 服务范围
		goToServiceArea() {
			uni.navigateTo({
				url: '/pages/service-area/service-area'
			})
		},
		
		// 宠物档案
		goToPets() {
			uni.navigateTo({
				url: '/pages/pets/pets'
			})
		},
		
		// 账户安全
		goToSecurity() {
			uni.navigateTo({
				url: '/pages/security/security'
			})
		},
		
		// 支付设置
		goToPaymentSettings() {
			uni.navigateTo({
				url: '/pages/payment-settings/payment-settings'
			})
		},
		
		// 隐私设置
		goToPrivacy() {
			uni.navigateTo({
				url: '/pages/privacy/privacy'
			})
		},
		
		// 帮助中心
		goToHelp() {
			uni.navigateTo({
				url: '/pages/help/help'
			})
		},
		
		// 联系客服
		contactSupport() {
			uni.showActionSheet({
				itemList: ['在线客服', '电话客服', '邮件客服'],
				success: (res) => {
					if (res.tapIndex === 0) {
						// 打开在线客服
						uni.navigateTo({
							url: '/pages/online-service/online-service'
						})
					} else if (res.tapIndex === 1) {
						// 拨打客服电话
						uni.makePhoneCall({
							phoneNumber: '400-123-4567'
						})
					} else if (res.tapIndex === 2) {
						// 发送邮件
						uni.showToast({title: 'support@petnurse.com', icon: 'none', duration: 3000})
					}
				}
			})
		},
		
		// 意见反馈
		goToFeedback() {
			uni.navigateTo({
				url: '/pages/feedback/feedback'
			})
		},
		
		// 关于我们
		goToAbout() {
			uni.navigateTo({
				url: '/pages/about/about'
			})
		},
		
		// 退出登录
		logout() {
			uni.showModal({
				title: '退出登录',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除用户数据
						uni.removeStorageSync('userToken')
						uni.removeStorageSync('userInfo')
						
						// 跳转到登录页
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.container {
	background: linear-gradient(135deg, #F5F5F5 0%, #F0F8FF 100%);
	min-height: 100vh;
	padding: 20rpx;
}
.income-card-container{
	padding: 0 20rpx 20rpx;
}

/* 用户信息卡片 */
.user-card {
	background: linear-gradient(135deg, rgb(255, 248, 220) 0%, #FFF0F5 100%);
	border-radius: var(--radius-xl);
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	box-shadow: var(--shadow-heavy);
	border: 1rpx solid var(--border-light);
	transition: all 0.3s ease;
}

.user-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	justify-content: space-between;
}

.avatar-section {
	position: relative;
	margin-right: 25rpx;
	transition: transform 0.3s ease;
}

.user-avatar {
	width: 130rpx;
	height: 130rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.5);
	box-shadow: var(--shadow-medium);
}

.verified-badge {
	position: absolute;
	top: -5rpx;
	right: -5rpx;
	width: 40rpx;
	height: 40rpx;
	background: #4CAF50;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: white;
	border: 3rpx solid white;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.camera-icon {
	position: absolute;
	bottom: -5rpx;
	right: -5rpx;
	width: 40rpx;
	height: 40rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18rpx;
	border: 2rpx solid white;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.user-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.user-name {
	font-size: 34rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
	color: var(--title-text-color);
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.user-role {
	font-size: 24rpx;
	opacity: 0.9;
	display: block;
	margin-bottom: 15rpx;
	color: var(--text-secondary);
	font-weight: 500;
}

.user-stats {
	display: flex;
	gap: 20rpx;
	flex-wrap: wrap;
}

.stat-item {
	font-size: 20rpx;
	opacity: 0.8;
	background: rgba(255, 255, 255, 0.5);
	padding: 6rpx 12rpx;
	border-radius: 20rpx;
	box-shadow: var(--shadow-light);
}

.edit-btn {
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edit-icon {
	font-size: 26rpx;
	color: var(--title-text-color);
	font-weight: 600;
}

.auth-status {
	display: flex;
	gap: 20rpx;
	margin-top: 20rpx;
}

.auth-item {
	flex: 1;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-large);
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-light);
}

.auth-item.verified {
	background: rgba(76, 175, 80, 0.3);
	border: 2rpx solid #4CAF50;
}

.auth-icon {
	font-size: 26rpx;
	filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
}

.auth-text {
	font-size: 22rpx;
	opacity: 0.9;
	font-weight: 500;
}

.auth-status-text {
	font-size: 20rpx;
	opacity: 0.8;
	font-weight: 600;
}

/* 收入统计卡片 */
.income-card {
	background: white;
	border-radius: var(--radius-large);
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: var(--shadow-medium);
	border: 1rpx solid var(--border-light);
	transition: all 0.3s ease;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25rpx;
	border-bottom: 2rpx solid var(--border-light);
	padding-bottom: 15rpx;
}

.card-title {
	font-size: 28rpx;
	font-weight: bold;
	color: var(--text-primary);
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

.view-detail {
	font-size: 24rpx;
	color: var(--orange-accent);
	font-weight: 500;
	transition: all 0.3s ease;
}

.income-stats {
	display: flex;
	margin-bottom: 25rpx;
	gap: 20rpx;
	flex-wrap: wrap;
}

.income-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	min-width: 150rpx;
}

.income-value {
	font-size: 32rpx;
	font-weight: bold;
	color: var(--orange-accent);
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.income-label {
	font-size: 22rpx;
	color: var(--text-secondary);
}

.withdraw-section {
	display: flex;
	justify-content: center;
	margin-top: 20rpx;
}

.withdraw-btn {
	width: 200rpx;
	height: 60rpx;
	background: #FF8C42;
	color: white;
	border: none;
	border-radius: 30rpx;
	font-size: 24rpx;
}

/* 订单统计卡片 */
.order-stats-card {
	background: white;
	border-radius: var(--radius-large);
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: var(--shadow-medium);
	border: 1rpx solid var(--border-light);
	transition: all 0.3s ease;
}

.stats-grid {
	display: flex;
	gap: 10rpx;
}

.stats-grid .stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 20rpx 0;
	border-radius: var(--radius-large);
	background: #F9F9F9;
	margin: 0 5rpx;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-light);
}

.stat-number {
	font-size: 36rpx;
	font-weight: bold;
	color: var(--orange-accent);
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.stat-label {
	font-size: 22rpx;
	color: var(--text-secondary);
}

/* 功能菜单卡片 */
.menu-card {
	background: white;
	border-radius: var(--radius-large);
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: var(--shadow-medium);
	border: 1rpx solid var(--border-light);
	transition: all 0.3s ease;
}

.menu-section {
	margin-bottom: 30rpx;
	background: var(--bg-tertiary);
	border-radius: var(--radius-medium);
	padding: 15rpx;
}

.menu-section:last-child {
	margin-bottom: 0;
}

.section-title {
	font-size: 24rpx;
	color: var(--text-tertiary);
	margin-bottom: 20rpx;
	display: block;
	font-weight: 600;
	border-bottom: 1rpx solid var(--border-light);
	padding-bottom: 10rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 25rpx 0;
	border-bottom: 2rpx solid #F0F0F0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	font-size: 30rpx;
	width: 50rpx;
	text-align: center;
	margin-right: 20rpx;
	filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
}

.menu-text {
	flex: 1;
	font-size: 26rpx;
	color: var(--text-primary);
	font-weight: 500;
}

.menu-arrow {
	font-size: 24rpx;
	color: var(--text-tertiary);
}

/* 退出登录 */
.logout-section {
	padding: 30rpx 0;
	display: flex;
	justify-content: center;
}

.logout-btn {
	width: 300rpx;
	height: 80rpx;
	background: #F44336;
	color: white;
	border: none;
	border-radius: 12rpx;
	font-size: 28rpx;
}
</style>